<template>
  <el-dialog
      :title="!dataForm.servId ? '新增' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
      <el-form-item label="服务名称" prop="serName">
        <el-input v-model="dataForm.serName" placeholder="服务名称"></el-input>
      </el-form-item>
      <el-form-item label="服务描述" prop="servDescribe">
        <el-input v-model="dataForm.servDescribe" placeholder="服务描述"></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="servUser">
        <el-input v-model="dataForm.servUser" placeholder="联系人"></el-input>
      </el-form-item>
      <el-form-item label="联系人电话" prop="servPhone">
        <el-input v-model="dataForm.servPhone" placeholder="联系人电话"></el-input>
      </el-form-item>
      <el-form-item label="联系人邮箱" prop="servEmail">
        <el-input v-model="dataForm.servEmail" placeholder="联系人邮箱"></el-input>
      </el-form-item>
      <!--      <el-form-item label="联系人地址" prop="servAddress">-->
      <!--        <el-input v-model="dataForm.servAddress" placeholder="联系人地址"></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item label="上传文档" prop="servApi">
        <el-upload
            class="upload-demo"
            ref="upload_wd"
            :headers="dataForm.headers"
            :action="dataForm.upload_wd.uploadUrl"
            :before-upload="beforeUploadHandle_wd"
            :multiple="false"
            :limit="1"
            :on-success="successHandle_wd"
            :on-preview="handlePreview"
            :file-list="dataForm.upload_wd.fileList"
            :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload_wd">确认导入</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>

import $XEUtils from "xe-utils";
import $Store from "@/store";
import $axios from '@/network'

export default {
  data () {
    return {
      visible: false,
      dataForm: {
        servId: 0,
        servDescribe: '',
        servUser: '',
        servPhone: '',
        servEmail: '',
        servAddress: '',
        servApi: '',
        upload_wd: {
          uploadUrl: process.env.VUE_APP_API_URL+'data/upload/upload',
          num: 0,
          successNum: 0,
          fileList: []
        },
        headers: {
          source: process.env.VUE_APP_API_SOURCE,
          Authorization: $XEUtils.isEmpty($Store.state.Authentication.access_token) ? process.env.VUE_APP_API_AUTHENTICATION : $Store.state.Authentication.access_token
        }
      },
      dataRule: {
        servDescribe: [
          { required: true, message: '服务描述不能为空', trigger: 'blur' }
        ],
        servUser: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ],
        servPhone: [
          { required: true, message: '联系人电话不能为空', trigger: 'blur' }
        ],
        servEmail: [
          { required: true, message: '联系人地址不能为空', trigger: 'blur' }
        ],
        servApi: [
          { required: true, message: '文档地址不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init (servId) {
      this.dataForm.servId = servId || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.servId) {
          $axios({
            url:'/resource/item/findById',
            method: 'get',
            params: {
              'servId': servId
            },
            // headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
          }).then(data=>{
            if (data && data.code === 200) {
              this.dataForm.servId = data.data.resourceId
              this.dataForm.serName = data.data.resourceName
              this.dataForm.servDescribe = data.data.resourceDescribe
              this.dataForm.servUser = data.data.createdUser.realName
              this.dataForm.servPhone = data.data.createdUser.phone
              this.dataForm.servEmail = data.data.createdUser.email
              this.dataForm.servAddress = data.data.paymentStatus
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          $axios({
            url:'/data/dataService/edit',
            method: 'post',
            params: {
              'servId': this.dataForm.servId,
              'servDescribe': this.dataForm.servDescribe,
              'servUser': this.dataForm.servUser,
              'servPhone': this.dataForm.servPhone,
              'servEmail': this.dataForm.servEmail,
              'servAddress': this.dataForm.servAddress
            },
            // headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
          }).then(data=>{
            if (data && data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },      // 上传之前
    beforeUploadHandle_wd(file) {
      // if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
      //   this.$message.error('只支持jpg、png、gif格式的图片！')
      //   return false
      // }
      // this.form.num++
    },
    // 上传成功
    successHandle_wd(response, file, fileList) {
      this.dataForm.upload_wd.fileList = fileList
      if (response && response.code === 200) {
        this.dataForm.servApi=response.data
      } else {
        this.$message.error(response.msg)
      }
    },
    handlePreview(file) {
      let url=file.response.data
      window.open(url)
    },
    submitUpload_wd() {
      this.$refs.upload_wd.submit();
      this.$message({
        message: '导入成功',
        type: 'success',
        duration: 1500,
        onClose: () => {
          // this.getDataList()
        }
      })
    }
  }
}
</script>
